<script setup>
    import { ref } from 'vue'

    // 接收父组件的值
    const props = defineProps({
        tableDataTotal: Number,
        pageArray: {
            type: Array,
            default: [2,5,8,10]
        }
    })

    // 子传父
    const emits = defineEmits(['page-sizes'])
    const sendPageSizes = () => {
        emits('page-sizes', {pageSize, currentPage})
    }

    // 每页条数
    const pageSize = ref(props.pageArray[0])

    // 当前页数
    const currentPage = ref(1)

    // 每页条数变化时
    const handleSizeChange = () => {
        currentPage.value = 1
        sendPageSizes()
    }
    // 页码变化时
    const handleCurrentChange = () => {
        sendPageSizes()
    }

    sendPageSizes()
</script>

<template>
    <div class="pagination">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes=pageArray
            background
            layout="sizes, prev, pager, next, total, jumper"
            :total="tableDataTotal"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        ></el-pagination>
    </div>
</template>

<style scoped lang="scss">

</style>